<template>
  <el-row>
    <span class="ping">
        0条真实用户评论
    </span>
    <el-row class="p1">
        <el-col class="p2">
            <p class="p3">总评数：{{data.all_remarks}}</p>
            <p class="p3">好评数：{{ data.good_remarks }}</p>
            <p class="p3">差评数：{{data.bad_remarks}}</p>
        </el-col>
        <el-col class="p4">
            <el-col>
                <el-rate
                v-model="data.hotellevel.level"
                disabled
                show-score
                text-color="#ff9900">
                {{ data.hotellevel.level }}
            </el-rate>
            <div>
            <el-col v-model="data.hotellevel.level" v-if="0<=data.hotellevel.level&&data.hotellevel.level<1" class="p5">很差</el-col>
            <el-col v-model="data.hotellevel.level" v-if="1<=data.hotellevel.level&&data.hotellevel.level<2" class="p5">差</el-col>
            <el-col v-model="data.hotellevel.level" v-if="2<=data.hotellevel.level&&data.hotellevel.level<3" class="p5">一般</el-col>
            <el-col v-model="data.hotellevel.level" v-if="3<=data.hotellevel.level&&data.hotellevel.level<4" class="p5">推荐</el-col>
            <el-col v-model="data.hotellevel.level" v-if="4<=data.hotellevel.level&&data.hotellevel.level<=5" class="p5">非常推荐</el-col></div>
            </el-col>
        </el-col>
        <el-col class="p6">
            <el-col class="p7">
                <el-col class="pl">
                    <svg viewBox="0 0 74 74">
                        <path class="p8"></path>
                    </svg>
                    <span class="p9">
                        <span color="rgb(255,153,0);">
                            环境
                        </span>
                        <span color="rgb(255,153,0);">
                            {{ data.scores.environment }}
                        </span>
                    </span>
                </el-col>
            </el-col>
        </el-col>
        <el-col class="p6">
            <el-col class="p7">
                <el-col class="pl">
                    <svg viewBox="0 0 74 74">
                        <path class="p8"></path>
                    </svg>
                    <span class="p9">
                        <span color="rgb(255,153,0);">
                            产品
                        </span>
                        <span color="rgb(255,153,0);">
                            {{ data.scores.product }}
                        </span>
                    </span>
                </el-col>
            </el-col>
        </el-col>
        <el-col class="p6">
            <el-col class="p7">
                <el-col class="pl">
                    <svg viewBox="0 0 74 74">
                        <path class="p8"></path>
                    </svg>
                    <span class="p9">
                        <span color="rgb(255,153,0);">
                            服务
                        </span>
                        <span color="rgb(255,153,0);">
                            {{ data.scores.service }}
                        </span>
                    </span>
                </el-col>
            </el-col>
        </el-col>
    </el-row>
</el-row>
</template>

<script>
export default {
    props:{
        data:
        {
            type:Object,
            default:()=>({})
        }
    },
}

</script>

<style scoped lang="less">
.pl{
    position: relative;
}
.ping{
    display: block;
    font-weight: bold;
}
.p1{
    color: #666;
    padding: 20px 0;
}
.p2{
    width:16.66667%;
}
.p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.p3{
    margin: 0;
    padding: 0;
}
.p4{
    position: relative;
    display: flex;
    align-content:center;
    width: 20.83333%;
}
.p5{
    position: absolute;
    left: 20px;
    border: 2px solid #fa3;
    text-align: center;
    line-height: 70px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    opacity: .25;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
    color: #f90;
}
.p6{
    width: 12.5%;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.p7{
    width: 70px;
}
.p8{
    d: path("M 35 2 A 35 35 0 1 1 10.944 12.4099");
    fill: none;
    stroke: rgb(255, 153, 0);
    stroke-width: 2;
}
.p9{
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color: rgb(255, 153, 0);
}
</style>